<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>题库专家</title>
  <link rel="stylesheet" href="../assect/css/util.css">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <!-- <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="../assect/js/pagination.js"></script>
  <!-- <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> -->
</head>

<body>
  <!-- 头部 -->
  <div class="header">
    <span>
      <div class="menu-icon"></div>
    </span>
    <p class="outLogin">退出登陆</p>
  </div>
  <!-- 侧边导航 -->
  <div id="canvas-warp">
    <div class="nav">
      <ul class="nav-ul">
        <li class="nav-font">
          <p>激活码管理</p>
          <ul class="son-nav">
            <a href="../index.html">
              <li>激活码列表</li>
            </a>
            <a href="./activeRecord.html">
              <li>激活记录</li>
            </a>
          </ul>
        </li>
        <li class="nav-font">
          <p>用户管理</p>
          <ul class="son-nav">
            <a href="./userList.html">
              <li>用户列表</li>
            </a>
            <a href="./feedback.html">
              <li>用户反馈</li>
            </a>
            <a href="./loginJournal.html">
              <li>登陆日志</li>
            </a>
            <a href="./commentList.html">
              <li>评论列表</li>
            </a>
          </ul>
        </li>
        <li class="nav-font">
          <p>订单管理</p>
          <ul class="son-nav">
            <a href="./userOrder.html">
              <li>用户订单</li>
            </a>
            <a href="./agentOrder.html">
              <li>代理订单</li>
            </a>
          </ul>
        </li>
      </ul>
    </div>
    <div class="mask"></div>
  </div>
  <!-- 内容区域 -->
  <div class="content">
    <div class="content-box">
      <div class="title">
        <p>用户信息编辑</p>
        <p class="jump-bank" onclick="javascript:history.back(-1);">返回</p>
      </div>
      <div class="content-box-con">
        <!-- 头像 -->
        <div class="file">
          <span>头像</span>
          <input type="file" id="abc">

        </div>
        <div id="bcd"></div>
        <!-- 用户昵称 -->
        <div>
          <span>用户昵称</span>
          <input type="text" placeholder="用户昵称">
        </div>
        <!-- 用户类型 -->
        <div>
          <span>用户类型</span>
          <select>
            <option value="">普通用户</option>
            <option value="">代理用户</option>
          </select>
        </div>

        <!-- 永久激活码购买价格 -->
        <div>
          <span>永久激活码购买价格</span>
          <input type="text" placeholder="永久激活码购买价格">
        </div>
        <!-- 1年激活码购买价格 -->
        <div>
          <span>1年激活码购买价格</span>
          <input type="text" placeholder="1年激活码购买价格">
        </div>
        <!-- 用户余额 -->
        <div>
          <span>用户余额</span>
          <input type="text" placeholder="用户余额">
        </div>
        <!-- 密码 -->
        <div>
          <span>密码</span>
          <input type="text" placeholder="密码">
        </div>
        <!-- 手机号码 -->
        <div>
          <span>手机号码</span>
          <input type="text" placeholder="手机号码">
        </div>
      </div>
      <div class="content-box-btn btn-new">
        <button>保存</button>
      </div>
    </div>
  </div>
  <script>
    $(function () {
      $('#canvas-warp').hide();
      $('.son-nav').hide();
      // 点击图标，显示导航
      $('.menu-icon').click(function () {
        $('#canvas-warp').toggle(300);
      })
      // 点击遮罩，隐藏导航
      $('.mask').click(function () {
        $('#canvas-warp').toggle(300);
      })
      $('.nav-font').click(function (event) {
        $(this).children('.son-nav').toggle(300);
        $(this).siblings().children('.son-nav').hide(300);
      });
      // 退出登录
      $('.outLogin').click(function () {
        $(location).attr('href', '../login.html');
      })
    })
  </script>
  <script>
    $(function () {
      $("#abc").change(function (e) {
        var imgBox = e.target;
        uploadImg($('#bcd'), imgBox)
      });

      function uploadImg(element, tag) {
        var file = tag.files[0];
        var imgSrc;
        if (!/image\/\w+/.test(file.type)) {
          alert("看清楚，这个需要图片！");
          return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
          console.log(this.result);
          imgSrc = this.result;
          var imgs = document.createElement("img");
          $(imgs).attr("src", imgSrc);
          element.append(imgs);
        };
      }
    })
  </script>
</body>

</html>